<template>
	<view>
		<uni-section title="非选择模式" type="line">
			<button class="btn" @click="goSelect(eprop)">非选择模式</button>
		</uni-section>
		<uni-section title="非选择模式" type="line">
			<button class="btn" @click="goSelect(aprop)">多选模式（选择任意一项）</button>
			<button class="btn" @click="goSelect(bprop)">多选模式（关联下级）</button>
			<button class="btn" @click="goSelect(cprop)">单选模式(任意一项)</button>
			<button class="btn" @click="goSelect(dprop)">单选（只选user）</button>

			<button class="btn" @click="clear()">清空选择</button>

			<view class="children">
				<view v-for="(item,index) in selectListItem" style="margin: 2px;display: inline-block;font-size: 26rpx;"
					:key="index">
					<view>名字：{{item.name}};&nbsp;</view>
					路径：
					<view v-for="(row,k) in item.path" style="display: inline-block;font-size: 24rpx;" :key="k">
						{{row.name}}-
					</view>
					<view>--------</view>
				</view>
			</view>
		</uni-section>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	const selectListItem = ref([])
	const aprop = {
		label: 'name',
		children: 'children',
		multiple: true,
		isCheck: true
	}
	const bprop = {
		label: 'name',
		children: 'children',
		multiple: true,
		checkStrictly: true,
		isCheck: true
	}
	const cprop = { //单选模式(任意一项)
		label: 'name',
		children: 'children',
		multiple: false,
		nodes: false,
		isCheck: true
	}
	const dprop = { //单选模式选user
		label: 'name',
		children: 'children',
		multiple: false,
		nodes: true,
		isCheck: true
	}
	const eprop = { //单选模式选user
		label: 'name',
		children: 'children',
		multiple: false,
		nodes: true,
		isCheck: false
	}


	onLoad(() => {
		uni.$on('selectSuccess', (data) => {
			selectListItem.value = [...data.list]
			// this.$set(this, 'selectListItem', [...data.list])
		})
	})

	const goSelect = (prop : any) => {
		let items : string = ''
		// #ifdef H5
		items = encodeURIComponent(JSON.stringify(selectListItem.value));
		// #endif
		// #ifdef MP-QQ||MP-WEIXIN
		items = JSON.stringify(selectListItem.value);
		// #endif
		console.log(items)
		console.log(JSON.stringify(prop))
		uni.navigateTo({
			url: `/pages/select/selectUser?arr=${items}&prop=${JSON.stringify(prop)}`
		})
	}
	const clear = () => {
		selectListItem.value = [];
	}
</script>

<style>
	.children {
		margin: 40rpx;
		padding: 40rpx;
		color: #BBB2B2;
	}

	.color {
		color: #bbb2b2;
	}

	.btn {
		margin: 20px 40px;
		background-color: #54B9CC;
		color: white;
	}
</style>